<template>
  <div class="info">
 <div class="conten">
 <div class="title">
 基本信息
 <p>{{userinfo}}</p>
 </div>
 <div class="item">
 <span>头像</span>
 <img src="/images/马里奥.png" alt="">
 </div>
  <div class="item">
 <span>手机号码</span>
 <span>{{userinfo.user_phone||"暂未设置"}}</span>
 </div>
   <div class="item">
 <span>昵称</span>
 <span>{{userinfo.user_nickname||"暂未设置"}}</span>
 </div>
   <div class="item">
 <span>性别</span>
 <span>{{userinfo.user_sex||"暂未设置"}}</span>
 </div>
   <div class="item">
 <span>生日</span>
 <span>{{userinfo.user_birthday||"暂未设置"}}</span>
 </div>
   <div class="item">
 <span>个性签名</span>
 <span>{{userinfo.user_sign||"暂未设置"}}</span>
 </div>
 
 </div>
 
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  computed:{
    ...mapGetters(['userinfo'])
  }

}
</script>

<style lang='less' scoped>
.info{
 
.conten{
 
  margin: 40px 20%;
  
   .title{
  font-size: 18px;
  font-weight: 800;
  
 }
 .item{
 display: flex;
  height: 80px;
  justify-content: space-between;
 
  margin-top: 10px;
  align-items: center;
  
   
  
box-shadow: 0 2px 0 0 #323233;
  
  img{
     width: 80px;
        height: 80px;
        border-radius: 15%;  
      
  }
  span{
  margin-left: 10px;
    font-weight: 800;

  }


 }
}

}

</style>